<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test construction of a view timeline with a detached subject</title>
</head>
<style type="text/css">
  #container {
    overflow:  hidden;
    height:  200px;
    width:  200px;
  }

  #block {
    background:  green;
    height:  100px;
    width:  100px;
  }

  .filler {
    height:  200px;
  }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<body>
  <div id="container">
    <div class="filler"></div>
  </div>
</body>
<script>
  promise_test(async t => {
    const element = document.createElement('div');
    element.id = 'block';
    const timeline = new ViewTimeline({
      subject: element,
      inset: new CSSMathNegate(CSS.px(144))
    });
    assert_equals(timeline.source, null, 'Null source while detached');
    await waitForNextFrame();
    const scroller = document.getElementById('container');
    scroller.appendChild(element);
    assert_equals(timeline.source, scroller, 'Source resolved once attached');
    await waitForNextFrame();

    // Start offset = cover 0%
    //              = target offset - viewport height + end side inset
    //              = 200 - 200 + (-144) = -144
    assert_equals(timeline.startOffset.toString(), CSS.px(-144).toString());
    // End offset = cover 100%
    //            = target offset + target height - start side inset
    //            = 200 + 100 - (-144) = 444
    assert_equals(timeline.endOffset.toString(), CSS.px(444).toString());
  }, 'Creating a view timeline with a subject that is not attached to the ' +
     'document works as expected');
</script>
</html>
